<template>
    <section class="hr-wrap">
        <h2 class="title">健康档案</h2>
        <div class="underline"></div>

        <div class="pc-layout">
            <PersonalSidebar />
            <el-card class="hr-card">
                <div class="hr-head"><h3>健康档案</h3></div>
                <div class="hr-grid">
                    <el-statistic title="血压（mmHg）" :value="'128/82'" />
                    <el-statistic title="心率（bpm）" :value="72" />
                    <el-statistic title="血糖（mmol/L）" :value="5.6" />
                    <el-statistic title="体重（kg）" :value="66.5" />
                </div>
                <div class="hr-sub">最近三个月体检数据，评估结果：总体稳定</div>
                <el-table :data="records" border class="hr-table">
                    <el-table-column prop="date" label="日期" width="120" />
                    <el-table-column prop="bp" label="血压" width="120" />
                    <el-table-column prop="hr" label="心率" width="120" />
                    <el-table-column prop="glucose" label="血糖" width="120" />
                    <el-table-column prop="note" label="医生建议" />
                </el-table>
            </el-card>
        </div>
    </section>
</template>

<script setup>
    import { ref } from "vue";
    import PersonalSidebar from "@/components/PersonalSidebar.vue";

    const records = ref([
        {
            date: "2023-10-01",
            bp: "130/85",
            hr: 72,
            glucose: 5.6,
            note: "维持现有用药，注意清淡饮食",
        },
        {
            date: "2023-09-01",
            bp: "128/80",
            hr: 70,
            glucose: 5.5,
            note: "坚持适度运动，每周散步3次",
        },
        { date: "2023-08-01", bp: "125/78", hr: 68, glucose: 5.4, note: "定期监测血压与血糖" },
    ]);
</script>

<style scoped>
    .hr-wrap {
        padding: 32px 20px;
    }
    .title {
        text-align: center;
        font-weight: 800;
        font-size: 24px;
        color: #222;
    }
    .underline {
        width: 80px;
        height: 4px;
        background: #4a7b26;
        border-radius: 2px;
        margin: 10px auto 24px;
    }
    .pc-layout {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 20px;
    }
    .hr-card { }
    .hr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .hr-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 14px;
    }
    .hr-sub {
        color: #666;
        margin-bottom: 8px;
    }
    .hr-table {
        margin-top: 8px;
    }
    @media (max-width: 900px) {
        .pc-layout { grid-template-columns: 1fr; }
        .hr-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>
